The :root pseudo-class in CSS represents the highest-level element in the document tree, which is usually the <html> element. While it often selects the same element as the html selector, there are important differences.

Key Differences Between :root and html Selector

1
:root is a pseudo-class that specifically targets the root element of the document, which is useful for defining global CSS variables (--variable-name).
2
html is a type selector that selects all <html> elements. In standard HTML documents, there is only one, so it often overlaps with :root.
3
:root has higher specificity than the html selector, so rules defined with :root can override those on html if both are applied to the same properties.
4
:root is particularly useful in SVG documents or XML documents where the root element may not be <html>.

Example: Using :root vs html

In this example, the :root pseudo-class is used to define a global CSS variable and set a font size. While the html selector could also set font size, :root is preferred for defining variables and ensures higher specificity.

Best Practices

1
Use :root for defining CSS variables and global styles that may need to be referenced throughout the document.
2
Use the html selector for general styling of the HTML element when variables are not involved.
3
Understand that :root has higher specificity than html, so it can override html styles if necessary.
4
Test styles in different document types (HTML, SVG) to ensure :root behaves as expected.

Difficulty: 3/10

Topics: CSS custom properties, selector specificity, scope of root vs html

Scenario Questions

0-2 years experience

1
You're trying to set a theme color using --primary-color, but it's not working when you define it on html — what's the most likely reason?
2
How would you fix a situation where a CSS variable defined in html isn't being picked up by a child component?
3
If you write both html { --color: red; } and :root { --color: blue; }, which one wins and why?

2-5 years experience

1
A designer reports that theme colors are inconsistent across pages — you notice some components use html and others use :root for variables. How do you debug and fix this?
2
Your team's CSS library uses html for global variables, but now you're adding a third-party widget that styles html itself. What could break, and how would you resolve it?
3
Why might a CSS variable defined on html stop working after adding a CSS reset that targets html with !important?

5-8 years experience

1
You're designing a theming system for a large UI library — why would you choose :root over html for global variables, and what edge cases might you encounter with shadow DOM or iframes?
2
In a micro-frontend architecture, multiple teams define CSS variables on html. How does using :root help avoid conflicts, and what other strategies would you recommend?
3
How would you structure a CSS architecture to support dynamic theme switching at runtime using :root, and what performance implications should you consider?

8+ years experience

1
You're migrating a legacy codebase where global styles are defined on html across 50+ micro-frontends. What’s your strategy to safely transition to :root without breaking existing themes?
2
How would you design a cross-team CSS standard for a 1000+ engineer org that enforces consistent use of :root for theme variables, and how do you handle legacy tooling that auto-generates html selectors?
3
When building a CSS-in-JS framework that needs to interoperate with traditional CSS, how do you architect the runtime to ensure :root-based variables are correctly injected and prioritized across shadow boundaries and iframes?

Follow-up Questions

❓What happens if you define a custom property on html instead of :root?
❓Can you override a :root variable with an html selector? Why or why not?
❓Why do most CSS frameworks prefer :root for theme variables?